<!--
 * @Description
 * @Author: Devin-chen
 * @Date: 2021-10-27 21:24:39
 * @LastEditTime: 2022-01-25 18:14:47
 * @LastEditors: Please set LastEditors
 * @Reference: 原创
-->
<template>
  <div class="home">
    <el-row :gutter="20" class="first-row">
      <el-col :span="6">
        <div class="cc-card user paddingB6">
          <div class="cc-card-header"></div>
          <div class="cc-card-body paddingB6">
            <div class="user-image">
              <el-image
                style="width: 63px; height: 63px"
                src="http://devincp.gitee.io/cc_element/static/img/gif.0f4c7da8.gif"
              >
              </el-image>
            </div>
            <div class="user-info">
              <div class="user-info-top">晚上好，admin！</div>
              <div class="user-info-bottom">超级管理员</div>
            </div>
          </div>
          <div class="cc-card-footer paddingT6">
            周活跃天数：{{ numberW }}天；月活跃天数：{{ numberM }}天
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="cc-card"></div>
      </el-col>
      <el-col :span="6">
        <div class="cc-card"></div>
      </el-col>
      <el-col :span="6">
        <div class="cc-card"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col> <div class="cc-card"></div> </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12"> <div class="cc-card"></div> </el-col>
      <el-col :span="12"> <div class="cc-card"></div> </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8"> <div class="cc-card"></div> </el-col>
      <el-col :span="8"> <div class="cc-card"></div> </el-col>
      <el-col :span="8"> <div class="cc-card"></div> </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { random } from "@/utils/tools";
const numberW = random(1, 7);
const numberM = random(7, 31);
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
  .el-row {
    &:not(:last-child) {
      margin-bottom: 20px;
    }
  }
  .first-row {
  }
  .user {
    .cc-card-body {
      display: flex;
      align-items: center;
      justify-content: space-around;

      .user-image {
        :deep(.el-image) {
          border-radius: 50%;
        }
      }
      .user-info {
        .user-info-top {
          margin-bottom: 10px;
        }
      }
    }
    .cc-card-footer {
      font-size: 12px;
    }
  }
}
</style>
